<template>
  <div class="yanjiuyuan">
    <header>
      <div class="before">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </div>

      <div class="back">
        <div class="search_ipt">
          <van-icon name="search" />
          <input type="text" placeholder="搜索你感兴趣的内容" />
        </div>
      </div>
      <van-icon name="balance-o" @click="$router.push({ name: 'hotTopic' })" />
    </header>
    <main>
      <van-tabs v-model="active">
        <van-tab title="推荐">
          <div class="content1">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
              alt=""
              width="100%"
            />
            快问快答
          </div>
          <div class="content1">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
              alt=""
              width="100%"
            />
            快问快答
          </div>
          <div class="content1">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
              alt=""
              width="100%"
            />
            快问快答
          </div>
          <div class="content1">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
              alt=""
              width="100%"
            />
            快问快答
          </div>
          <div class="content1">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.3dmgame.com%2Fuploads%2Fimages%2Fnews%2F20210224%2F1614152247_478025.jpg&refer=http%3A%2F%2Fimg.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661500048&t=c8c54c9341e4628698157135ffdc4b20"
              alt=""
              width="100%"
            />
            快问快答
          </div>
        </van-tab>
        <van-tab title="高颜值">内容 2</van-tab>
        <van-tab title="问答">内容 3</van-tab>
        <van-tab title="科普">内容 4</van-tab>
        <van-tab title="医生说">内容 4</van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style scoped lang="scss">
.yanjiuyuan {
  height: 100%;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    // background-color: red;
    margin-top: 20px;
    .before {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p {
        margin-left: 20px;
      }
    }
    .back {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .search_ipt {
        width: 550px;
        height: 60px;
        padding: 10px 0 0 40px;
        border: 2px solid #ddd;
        border-radius: 30px;
        margin-right: 30px;
        i {
          margin-right: 10px;
        }
        input {
          width: 300px;
          height: 40px;
          border: none;
          margin-left: 10px;
        }
      }
    }
  }
  main {
    flex: 1;
    overflow-y: auto;
    .van-tabs__content {
      .van-tab__pane:nth-child(1) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        // align-content: space-between;
        .content1 {
          width: 180px;
          height: 310px;
          margin-top: 7px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>